<template>
	<view class="content">
		<view class="cont" @touchstart="start" @touchmove.stop.prevent="ing" @touchend="end" @click="dian">
			<view class='tttt' :style="[{top:testtop,left:testleft}]">{{title}}</view>
			<view v-if="isMove" :animation='animationData' style="position: fixed;" :style="{top:testtop,left:shutleft}">
				<text style="color: #333333;font-size: 58px;">"</text>
			</view>
			<view v-if="isStop" :animation='animaData' style="position: fixed;" :style="{top:testtop,left:shutleft}">
				<text style="color: #333333;font-size: 28px;">*</text>
			</view>
		</view>
	</view>
</template>
<script>
	const {
		windowWidth,
		windowHeight
	} = uni.getSystemInfoSync();
	export default {
		data() {
			return {
				animationData: {},
				animaData: {},
				title: 'o8o',
				testtop: '0px',
				testleft: '0px',
				shutleft: '0px',
				startX: 0,
				startY: 0,
				isMove: false,
				isStop: false,
			}
		},
		onLoad() {
			this.animation = uni.createAnimation({
				timingFunction: 'ease-in-out',
			});
			this.anima = uni.createAnimation({
				timingFunction: 'ease-in-out',
			});

			this.testtop = windowHeight - 50 + 'px';
			this.testleft = windowWidth / 2 - 20 + 'px';

			var that = this;
			document.addEventListener('mousemove', function(e) {
				e = e || window.event;
				that.testtop = e.clientY + 'px';
				that.testleft = e.clientX + 'px';
				that.shutleft = e.clientX + 10 + 'px';
				that.startX = e.clientX;
				that.startY = e.clientY;
			});
		},
		methods: {
			start(e) {
				this.testtop = e.touches[0].clientY + 'px';
				this.testleft = e.touches[0].clientX + 'px';
				this.shutleft = e.touches[0].clientX + 10 + 'px';
				this.startX = e.touches[0].clientX;
				this.startY = e.touches[0].clientY;
			},
			ing(e) {
				this.testtop = e.touches[0].clientY + 'px';
				this.testleft = e.touches[0].clientX + 'px';
				this.shutleft = e.touches[0].clientX + 10 + 'px';
				this.startX = e.touches[0].clientX;
				this.startY = e.touches[0].clientY;
			},
			end() {},
			dian() {
				this.isMove = true;
				this.isStop = true;
				this.animation.opacity(0).step({
					duration: 100,
				});
				this.animation.translateY(0).step({
					duration: 100,
				});
				var sy = this.startY - 50;
				var sm = 1000 * sy / 500;
				this.animation.opacity(1).step({
					duration: 100,
				});
				this.animation.translateY(0 - sy).opacity(0).step({
					duration: sm,
				});
				// this.animation.opacity(0).step({
				// 	duration: 100,
				// });
				this.animationData = this.animation.export();
				
				var ssmm = sm + 300;
				this.anima.translateY(0 - sy+50).opacity(0).step({
					duration: 100,
				});
				this.anima.opacity(1).step({
					duration: 100,
					delay: ssmm,
				});
				this.anima.scale(3, 3).opacity(0).step({
					duration: 300,
				});
				// this.isStop = false;
				this.animaData = this.anima.export();
			},
		}
	}
</script>

<style>
	.cont {
		width: 100%;
		height: 100VH;
	}

	.vvvv {
		width: 100%;
		height: 100%;
		background-color: #007AFF;
	}

	.tttt {
		width: 50rpx;
		height: 50rpx;
		position: fixed;
	}
</style>
